<template>
  <div class="container">
    <div class="select-wrapper">
      <div class="select-item" v-for="(select, index) in selectArr" @click.stop="screening(index)">
        <span class="select" :class="{'selected': currentIndex === index}">{{select}}</span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      data() {
        return {
          currentIndex: 0,
          selectArr: ['进行时', '即将开始', '等待开奖', '已开奖', '已流拍']
        }
      },
      methods: {
        screening(index) {
          this.currentIndex = index
          this.$emit("listenToScreening", (index + 2), this.selectArr[index])
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .container
    width 100%
    height 100%
    .select-wrapper
      margin 0 .16rem
      background-color #f6f7f9
      .select-item
        height .98rem
        line-height .98rem
        text-align center
        border-top .01rem solid #9B97AD
        .select
          font-size .3rem
          font-family 'PingFangSC-Regular'
          color #000
          &.selected
            color #0d8ef1
</style>
